import { useMemo } from 'react'
import { Menu } from 'antd';
import type { RouterTypes } from '../../router/routes';
import routes from '../../router/routes';
import { useLocation, useNavigate } from 'react-router-dom';
export default function Aside() {
  const location = useLocation();
  const history = useNavigate();
  const findRoute = useMemo(() => routes.find(route => route.path === location.pathname) || {} as RouterTypes, [location.pathname]);
  const menuItems = useMemo(() => routes.filter(route => !route.hideInMenu).map(item => ({
    ...item,
    key: item.path,
    label: item.name || item.path,
  })), [routes]);
  console.log("menuItems", menuItems, routes);

  const handleClick = (e) => {
    // navigate(e.key)
    history(e.key)
  };

  return (
    <Menu
      className='menuList'
      onClick={handleClick}
      selectedKeys={[findRoute?.path || '']}
      theme="light"
      mode="horizontal"
      items={menuItems as any[]}
    />
  )
}